<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>礼品首页</title>
    <link rel="stylesheet" href="./../Resources/plugins/layui/dist/css/layui.css">
    <link rel="stylesheet" href="./../Resources/css/common.css">
    <link rel="stylesheet" href="./../Resources/css/foot.css">
    <link rel="stylesheet" href="./../Resources/css/lipin.css">
    <style>
        .filter {
            width: 100%;
        }

        .filter .filter_items {

            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .filter .filter_items span {
            width: 33.33%;
        }
    </style>
</head>

<body class="layui-form" style="overflow: hidden;">
    <div class="layui-header ws-header">
        <div class="layui-container">
            <div class="ws-logo">
                <a class="logo" href="/">
                    <img src="./../Resources/img/logo.png" alt="layui">
                </a>
            </div>
        </div>
    </div>
    <div class="container" style="overflow: hidden;">
        <div class="next-search-input-container">
            <div class="next-search-input-center">
                <div class="next-search-input-center-icon"><i class="layui-icon layui-icon-search"></i></div>
                <div class="next-search-input-center-input">
                    <div class="div-wrapper">
                        <input type="" maxlength="50" step="" enterkeyhint="done" class="search-input"
                            autocomplete="off" placeholder="请输入搜索内容">
                    </div>
                </div>
            </div>
            <div class="next-search-input-right">
                <button type="button" class="layui-btn layui-btn-danger layui-btn-radius">搜索</button>
            </div>
        </div>
        <div class="next-search-nav-container next-search-nav-br">
            <div class="next-search-nav-warp">
                <div class="filter">
                    <div class="filter_items">
                        <span id="jiage">价格</span>
                        <span id="liull">浏览量</span>
                        <span id="shangjsj">上架时间<i class='iconfont icon-below-s'></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="next-list-container next-list-container-bg-gradient next-list-tile">
            <div class="next-list-content" style="overflow: hidden auto;">
                <div class="next-list-warp next-list-left next-list-left-tile">
                    <a class="next-list-warp-item next-list-warp-item-tile" href="goods-details.html?Id=1">
                        <div class="next-list-drawing-container">
                            <div class="next-list-drawing-img">
                                <img src="https://img2.baidu.com/it/u=2080770364,3063151710&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=500"
                                    alt="产品图片">
                            </div>
                        </div>
                        <div class="next-list-warp-item-content">
                            <div class="next-list-warp-item-box next-list-warp-item-clamp2">
                                <div class="next-list-warp-item-box-hot"><span>XA00232325-1</span></div>
                                <div class="next-list-warp-item-box-title">
                                    <span>首款全四摄光学防抖手机！6999元vivo X70
                                    </span>
                                </div>
                            </div>
                            <div class="next-list-warp-item-clamp1 next-list-warp-item-desc">
                                北斗卫星消息 |
                                超光变XMAGE影像</div>
                            <div class="next-list-tag-container">
                                <div class="next-list-tag-item"><span>剩余库存：0</span></div>
                            </div>
                            <div class="next-list-warp-item-price">
                                <span>
                                    <span class="next-list-warp-item-price-symbol">￥</span>6799.00
                                </span>
                                <span class="next-list-warp-item-price-del">￥5799</span>
                            </div>
                            <div class="next-list-warp-item-zhiffs">
                                <span class="weixzf">微信支付</span>
                                <span class="yidzf">伊豆支付</span>
                            </div>
                        </div>
                    </a>
                    <a class="next-list-warp-item next-list-warp-item-tile" href="goods-details.html?Id=2">
                        <div class="next-list-drawing-container">
                            <div class="next-list-drawing-img">
                                <img src="https://img2.baidu.com/it/u=2080770364,3063151710&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=500"
                                    alt="产品图片">
                            </div>
                        </div>
                        <div class="next-list-warp-item-content">
                            <div class="next-list-warp-item-box next-list-warp-item-clamp2">
                                <div class="next-list-warp-item-box-hot"><span>XA00232325-1</span></div>
                                <div class="next-list-warp-item-box-title">
                                    <span>首款全四摄光学防抖手机！6999元vivo X70
                                    </span>
                                </div>
                            </div>
                            <div class="next-list-warp-item-clamp1 next-list-warp-item-desc">
                                北斗卫星消息 |
                                超光变XMAGE影像</div>
                            <div class="next-list-tag-container">
                                <div class="next-list-tag-item"><span>剩余库存：0</span></div>
                            </div>
                            <div class="next-list-warp-item-price">
                                <span>
                                    <span class="next-list-warp-item-price-symbol">￥</span>6799.00
                                </span>
                                <span class="next-list-warp-item-price-del">￥5799</span>
                            </div>
                        </div>
                    </a>
                    <a class="next-list-warp-item next-list-warp-item-tile" href="goods-details.html?Id=3">
                        <div class="next-list-drawing-container">
                            <div class="next-list-drawing-img">
                                <img src="https://img2.baidu.com/it/u=2080770364,3063151710&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=500"
                                    alt="产品图片">
                            </div>
                        </div>
                        <div class="next-list-warp-item-content">
                            <div class="next-list-warp-item-box next-list-warp-item-clamp2">
                                <div class="next-list-warp-item-box-hot"><span>XA00232325-1</span></div>
                                <div class="next-list-warp-item-box-title">
                                    <span>首款全四摄光学防抖手机！6999元vivo X70
                                    </span>
                                </div>
                            </div>
                            <div class="next-list-warp-item-clamp1 next-list-warp-item-desc">
                                北斗卫星消息 |
                                超光变XMAGE影像</div>
                            <div class="next-list-tag-container">
                                <div class="next-list-tag-item"><span>剩余库存：0</span></div>
                            </div>
                            <div class="next-list-warp-item-price">
                                <span>
                                    <span class="next-list-warp-item-price-symbol">￥</span>6799.00
                                </span>
                                <span class="next-list-warp-item-price-del">￥5799</span>
                            </div>
                        </div>
                    </a>
                    <a class="next-list-warp-item next-list-warp-item-tile" href="goods-details.html?Id=4">
                        <div class="next-list-drawing-container">
                            <div class="next-list-drawing-img">
                                <img src="https://img2.baidu.com/it/u=2080770364,3063151710&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=500"
                                    alt="产品图片">
                            </div>
                        </div>
                        <div class="next-list-warp-item-content">
                            <div class="next-list-warp-item-box next-list-warp-item-clamp2">
                                <div class="next-list-warp-item-box-hot"><span>XA00232325-1</span></div>
                                <div class="next-list-warp-item-box-title">
                                    <span>首款全四摄光学防抖手机！6999元vivo X70
                                    </span>
                                </div>
                            </div>
                            <div class="next-list-warp-item-clamp1 next-list-warp-item-desc">
                                北斗卫星消息 |
                                超光变XMAGE影像</div>
                            <div class="next-list-tag-container">
                                <div class="next-list-tag-item"><span>剩余库存：0</span></div>
                            </div>
                            <div class="next-list-warp-item-price">
                                <span>
                                    <span class="next-list-warp-item-price-symbol">￥</span>6799.00
                                </span>
                                <span class="next-list-warp-item-price-del">￥5799</span>
                            </div>
                        </div>
                    </a>
                    <a class="next-list-warp-item next-list-warp-item-tile" href="goods-details.html?Id=5">
                        <div class="next-list-drawing-container">
                            <div class="next-list-drawing-img">
                                <img src="https://img2.baidu.com/it/u=2080770364,3063151710&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=500"
                                    alt="产品图片">
                            </div>
                        </div>
                        <div class="next-list-warp-item-content">
                            <div class="next-list-warp-item-box next-list-warp-item-clamp2">
                                <div class="next-list-warp-item-box-hot"><span>XA00232325-1</span></div>
                                <div class="next-list-warp-item-box-title">
                                    <span>首款全四摄光学防抖手机！6999元vivo X70
                                    </span>
                                </div>
                            </div>
                            <div class="next-list-warp-item-clamp1 next-list-warp-item-desc">
                                北斗卫星消息 |
                                超光变XMAGE影像</div>
                            <div class="next-list-tag-container">
                                <div class="next-list-tag-item"><span>剩余库存：0</span></div>
                            </div>
                            <div class="next-list-warp-item-price">
                                <span>
                                    <span class="next-list-warp-item-price-symbol">￥</span>6799.00
                                </span>
                                <span class="next-list-warp-item-price-del">￥5799</span>
                            </div>
                        </div>
                    </a>
                    <a class="next-list-warp-item next-list-warp-item-tile" href="goods-details.html?Id=6">
                        <div class="next-list-drawing-container">
                            <div class="next-list-drawing-img">
                                <img src="https://img2.baidu.com/it/u=2080770364,3063151710&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=500"
                                    alt="产品图片">
                            </div>
                        </div>
                        <div class="next-list-warp-item-content">
                            <div class="next-list-warp-item-box next-list-warp-item-clamp2">
                                <div class="next-list-warp-item-box-hot"><span>XA00232325-1</span></div>
                                <div class="next-list-warp-item-box-title">
                                    <span>首款全四摄光学防抖手机！6999元vivo X70
                                    </span>
                                </div>
                            </div>
                            <div class="next-list-warp-item-clamp1 next-list-warp-item-desc">
                                北斗卫星消息 |
                                超光变XMAGE影像</div>
                            <div class="next-list-tag-container">
                                <div class="next-list-tag-item"><span>剩余库存：0</span></div>
                            </div>
                            <div class="next-list-warp-item-price">
                                <span>
                                    <span class="next-list-warp-item-price-symbol">￥</span>6799.00
                                </span>
                                <span class="next-list-warp-item-price-del">￥5799</span>
                            </div>
                        </div>
                    </a>
                    <a class="next-list-warp-item next-list-warp-item-tile" href="goods-details.html?Id=7">
                        <div class="next-list-drawing-container">
                            <div class="next-list-drawing-img">
                                <img src="https://img2.baidu.com/it/u=2080770364,3063151710&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=500"
                                    alt="产品图片">
                            </div>
                        </div>
                        <div class="next-list-warp-item-content">
                            <div class="next-list-warp-item-box next-list-warp-item-clamp2">
                                <div class="next-list-warp-item-box-hot"><span>XA00232325-1</span></div>
                                <div class="next-list-warp-item-box-title">
                                    <span>首款全四摄光学防抖手机！6999元vivo X70
                                    </span>
                                </div>
                            </div>
                            <div class="next-list-warp-item-clamp1 next-list-warp-item-desc">
                                北斗卫星消息 |
                                超光变XMAGE影像</div>
                            <div class="next-list-tag-container">
                                <div class="next-list-tag-item"><span>剩余库存：0</span></div>
                            </div>
                            <div class="next-list-warp-item-price">
                                <span>
                                    <span class="next-list-warp-item-price-symbol">￥</span>6799.00
                                </span>
                                <span class="next-list-warp-item-price-del">￥5799</span>
                            </div>
                        </div>
                    </a>
                    <a class="next-list-warp-item next-list-warp-item-tile" href="goods-details.html?Id=8">
                        <div class="next-list-drawing-container">
                            <div class="next-list-drawing-img">
                                <img src="https://img2.baidu.com/it/u=2080770364,3063151710&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=500"
                                    alt="产品图片">
                            </div>
                        </div>
                        <div class="next-list-warp-item-content">
                            <div class="next-list-warp-item-box next-list-warp-item-clamp2">
                                <div class="next-list-warp-item-box-hot"><span>XA00232325-1</span></div>
                                <div class="next-list-warp-item-box-title">
                                    <span>首款全四摄光学防抖手机！6999元vivo X70
                                    </span>
                                </div>
                            </div>
                            <div class="next-list-warp-item-clamp1 next-list-warp-item-desc">
                                北斗卫星消息 |
                                超光变XMAGE影像</div>
                            <div class="next-list-tag-container">
                                <div class="next-list-tag-item"><span>剩余库存：0</span></div>
                            </div>
                            <div class="next-list-warp-item-price">
                                <span>
                                    <span class="next-list-warp-item-price-symbol">￥</span>6799.00
                                </span>
                                <span class="next-list-warp-item-price-del">￥5799</span>
                            </div>
                        </div>
                    </a>
                    <a class="next-list-warp-item next-list-warp-item-tile" href="goods-details.html?Id=9">
                        <div class="next-list-drawing-container">
                            <div class="next-list-drawing-img">
                                <img src="https://img2.baidu.com/it/u=2080770364,3063151710&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=500"
                                    alt="产品图片">
                            </div>
                        </div>
                        <div class="next-list-warp-item-content">
                            <div class="next-list-warp-item-box next-list-warp-item-clamp2">
                                <div class="next-list-warp-item-box-hot"><span>XA00232325-1</span></div>
                                <div class="next-list-warp-item-box-title">
                                    <span>首款全四摄光学防抖手机！6999元vivo X70
                                    </span>
                                </div>
                            </div>
                            <div class="next-list-warp-item-clamp1 next-list-warp-item-desc">
                                北斗卫星消息 |
                                超光变XMAGE影像</div>
                            <div class="next-list-tag-container">
                                <div class="next-list-tag-item"><span>剩余库存：0</span></div>
                            </div>
                            <div class="next-list-warp-item-price">
                                <span>
                                    <span class="next-list-warp-item-price-symbol">￥</span>6799.00
                                </span>
                                <span class="next-list-warp-item-price-del">￥5799</span>
                            </div>
                        </div>
                    </a>
                    <a class="next-list-warp-item next-list-warp-item-tile" href="goods-details.html?Id=10">
                        <div class="next-list-drawing-container">
                            <div class="next-list-drawing-img">
                                <img src="https://img2.baidu.com/it/u=2080770364,3063151710&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=500"
                                    alt="产品图片">
                            </div>
                        </div>
                        <div class="next-list-warp-item-content">
                            <div class="next-list-warp-item-box next-list-warp-item-clamp2">
                                <div class="next-list-warp-item-box-hot"><span>XA00232325-1</span></div>
                                <div class="next-list-warp-item-box-title">
                                    <span>首款全四摄光学防抖手机！6999元vivo X70
                                    </span>
                                </div>
                            </div>
                            <div class="next-list-warp-item-clamp1 next-list-warp-item-desc">
                                北斗卫星消息 |
                                超光变XMAGE影像</div>
                            <div class="next-list-tag-container">
                                <div class="next-list-tag-item"><span>剩余库存：0</span></div>
                            </div>
                            <div class="next-list-warp-item-price">
                                <span>
                                    <span class="next-list-warp-item-price-symbol">￥</span>6799.00
                                </span>
                                <span class="next-list-warp-item-price-del">￥5799</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

    </div>
    </div>
    <div class="layui-footer footer-menu clearfix">
        <div class="tabbar">
            <a href="lipinlist.html" class="tabbar-bd select">
                <i class="layui-icon layui-icon-gift"></i>
                <div class="icon-name">礼品</div>
            </a>
        </div>
        <div class="tabbar">
            <a href="#" class="tabbar-bd">
                <i class="layui-icon layui-icon-video"></i>
                <div class="icon-name">视频</div>
            </a>
        </div>
        <div class="tabbar">
            <a href="#" class="tabbar-bd">
                <i class="layui-icon layui-icon-lipin"></i>
                <div class="icon-name">购物车</div>
                <div class="tabbar-reddot tabbar-badge">24</div>
            </a>
        </div>
        <div class="tabbar">
            <a href="myusercenter.html" class="tabbar-bd">
                <i class="layui-icon layui-icon-username"></i>
                <div class="icon-name">我的</div>
            </a>
        </div>
    </div>

    <script src="./../Resources/plugins/layui/dist/layui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            // 初始化设置.next-list-container的高度
            $(".next-list-container").height($(window).height() - 200);
            $(".next-search-nav-container").width($('.next-list-container').width());

            // 监听窗口大小变动事件
            $(window).resize(function () {
                // 设置.next-list-container的高度为窗口高度
                $(".next-list-container").height($(window).height() - 200);
                $(".next-search-nav-container").width($('.next-list-container').width());
            });

            $(".filter .filter_items span").click(function () {
                var AscendingOrder = '<i class="iconfont icon-below-s"></i>';
                var DescendingOrder = '<i class="iconfont icon-top-s"></i>';
                var span = $(this);
                var children = $(this).children();
                var icons = $(this).find("i");
                var field = span.attr('id');
                var sort = 'asc';
                if (icons.length == 0) {
                    span.append(AscendingOrder);
                    sort = 'asc';
                } else {
                    icons.each(function () {
                        var iconhtml = $(this).prop("outerHTML");
                        children.remove();
                        if (iconhtml == AscendingOrder) {
                            span.append(DescendingOrder);
                            sort = 'desc';
                        }
                        else {
                            span.append(AscendingOrder);
                            sort = 'asc';
                        }
                    });
                }
                span.siblings().children().remove();

                console.log(field + ' ' + sort);
            });
        });



    </script>
</body>

</html>